<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${pageTitle}">搜索结果</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
</head>
<body>
    <div th:replace="~{common/header :: header}"></div>

    <div class="category-search-bar-container">
        <div class="main-nav">
            <ul>
                <li><a th:href="@{/index}">首页</a></li>
                <li th:each="type : ${goodsTypes}"><a th:href="@{/category(typeId=${type.id})}" th:text="${type.typename}"></a></li>
            </ul>
        </div>
        <div class="header-search">
            <form th:action="@{/search}" method="get">
                <input type="text" name="keyword" placeholder="请输入关键词" th:value="${keyword}">
                <button type="submit">搜索</button>
            </form>
        </div>
    </div>

    <div class="main-content">
        <h2 th:text="${pageTitle}"></h2>
        
        <!-- 分类筛选 -->
        <div class="category-filter">
            <h3>商品分类</h3>
            <ul>
                <li>
                    <a th:href="@{/search(keyword=${keyword})}" 
                       th:class="${selectedTypeId == null ? 'active' : ''}">所有分类</a>
                </li>
                <li th:each="type : ${goodsTypes}">
                    <a th:href="@{/search(keyword=${keyword}, typeId=${type.id})}" 
                       th:text="${type.typename}"
                       th:class="${selectedTypeId == type.id ? 'active' : ''}"></a>
                </li>
            </ul>
        </div>

        <!-- 搜索结果 -->
        <div th:if="${#lists.isEmpty(searchResults)}">
            <p>没有找到相关商品。</p>
        </div>
        <div th:unless="${#lists.isEmpty(searchResults)}" class="goods-list">
            <div th:each="goods : ${searchResults}" class="goods-item">
                <a th:href="@{/goodsDetail(id=${goods.id})}">
                    <img th:src="@{/images/{picture}(picture=${goods.gpicture})}" alt="商品图片">
                    <p th:text="${goods.gname}"></p>
                    <p>原价: <span th:text="${goods.goprice}"></span></p>
                    <p>现价: <span th:text="${goods.grprice}"></span></p>
                </a>
                <form th:action="@{/addToFavorites}" method="post" class="add-to-favorites-form">
                    <input type="hidden" name="goodsId" th:value="${goods.id}">
                    <button type="submit">加入收藏</button>
                </form>
                <form th:action="@{/addToCart}" method="post" class="add-to-cart-form">
                    <input type="hidden" name="goodsId" th:value="${goods.id}">
                    <input type="hidden" name="quantity" value="1">
                    <button type="submit">加入购物车</button>
                </form>
            </div>
        </div>
    </div>

    <div th:replace="~{common/footer :: footer}"></div>

    <script>
        // AJAX for Add to Favorites
        $('.add-to-favorites-form').submit(function(event) {
            event.preventDefault(); // 阻止表单默认提交

            const form = $(this);
            const url = form.attr('th:action') || form.attr('action');
            const goodsId = form.find('input[name="goodsId"]').val();

            $.ajax({
                url: url,
                type: 'POST',
                data: { goodsId: goodsId },
                success: function(response) {
                    alert(response.message);
                },
                error: function(xhr) {
                    const response = JSON.parse(xhr.responseText);
                    alert(response.message || '操作失败，请稍后再试！');
                }
            });
        });

        // AJAX for Add to Cart
        $('.add-to-cart-form').submit(function(event) {
            event.preventDefault(); // 阻止表单默认提交

            const form = $(this);
            const url = form.attr('th:action') || form.attr('action');
            const goodsId = form.find('input[name="goodsId"]').val();
            const quantity = form.find('input[name="quantity"]').val();

            $.ajax({
                url: url,
                type: 'POST',
                data: { goodsId: goodsId, quantity: quantity },
                success: function(response) {
                    alert(response.message);
                },
                error: function(xhr) {
                    const response = JSON.parse(xhr.responseText);
                    alert(response.message || '操作失败，请稍后再试！');
                }
            });
        });
    </script>
</body>
</html> 